<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>05生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <h1 :style='{opacity:tmd}'>欢迎来学习Vue</h1>
        <hr>
        <h2>当前求和为:{{sum}}</h2>
        <button @click="add" id="btn">点我+1</button>
        <button @click='death '>毁掉vm</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            // template: `<div>
            //     <h2>当前求和为:{{sum}}</h2>
            //     <button @click="add" id="btn">点我+1</button>	
            //     </div>`,
            data: {
                tmd: 1,
                sum: 0,
            },
            methods: {
                add() {
                    this.sum++
                },
                death() {
                    this.$destroy()
                }
            },
            mounted() {
                setInterval(() => {
                    this.tmd -= 0.01
                    if (this.tmd <= 0) this.tmd = 1
                }, 16)
            },
            // 初始化之前
            beforeCreate() {

            },
            // 初始化完毕
            created() {

            },
            //  挂载之间
            beforeMount() {

            },
            // 挂载完毕
            mounted() {

            },
            // 更新之前
            beforeUpdate() {

            },
            // 更新完毕
            updated() {

            },
            // 销毁之前
            beforeDestroy() {

            },
            // 销毁结束
            destroyed() {

            }
        })
    </script>
</body>

</html>